<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      @open="onOpen"
      @close="onClose"
      title="资料预览"
      class="preview-dialog"
    >
      <PdfPreview
        v-if="props.infor.fullurl && fileType == 'pdf'"
        :src="props.infor.fullurl"
      ></PdfPreview>
      <VideoPreview
        v-else-if="props.infor.fullurl && fileType == 'mp4'"
        :src="props.infor.fullurl"
      ></VideoPreview>
      <SingleImgPreview
        v-else-if="
          props.infor.fullurl && (fileType == 'png' || fileType == 'jpg')
        "
        :src="props.infor.fullurl"
      ></SingleImgPreview>
      <span v-else>该文件类型暂不支持预览</span>
    </el-dialog>
  </div>
</template>
<script setup>
import { getToken } from "@/utils/auth";
import { getTaskInfo } from "@/api/home/home";
import PdfPreview from "@/components/pdfPreview";
import VideoPreview from "@/components/videoPreview";
import SingleImgPreview from "@/components/SingleImgPreview";

const headers = ref({
  Authorization: "Bearer " + getToken(),
});

const { proxy } = getCurrentInstance();
const fileType = ref("");
const props = defineProps({
  infor: {
    type: Object,
    default: {},
  },
});

// 弹窗设置
const dialogVisible = defineModel();
// 弹窗确认回调
const emit = defineEmits(["confirm"]);
/**
 * @name: 弹窗打开后执行
 * @description: 弹窗打开后执行方法
 * @return {*}
 */
function onOpen() {
  if (props.infor.name) {
    fileType.value = props.infor.name.split(".")[1];
  }
}

/**
 * @name: 弹窗关闭时执行
 * @description: 弹窗关闭方法，重置表单
 * @return {*}
 */
function onClose() {}
/**
 * @name: 弹窗取消
 * @description: 弹窗取消方法
 * @return {*}
 */
function close() {
  dialogVisible.value = false;
}
/**
 * @name: 弹窗表单提交
 * @description: 弹窗表单提交方法
 * @return {*}
 */
</script>
<style lang="scss">
.preview-dialog {
  height: 90vh;
  width: 60%;
  .el-dialog__body {
    height: calc(100% - 50px);
  }
}
</style>
